<template>
    <div>
        <el-row class="wathdra_record">
            <el-col :span="24" class="leave_header_title">
                <div class="leave_title">
                    <div class="leave_left">上传图片</div>
                </div>
            </el-col>
        </el-row>
        <div class="img_upload_boxs">
            <div class="img_upload_box">
                <img :src="this.form.imgUrl" alt="">
            </div>
            <UploaderImages @input="bannerImg" uploadText="上传图片" class="img_manage_upload"></UploaderImages>
        </div>
        <div class="img_upload_url">
            <span>图片路径：{{form.imgUrl}}</span>
        </div>
    </div>
</template>

<script lang="ts">
    import { Vue, Component } from 'vue-property-decorator';
    import UploaderImages from '@/component/common/UploaderImages.vue';
    @Component({
        components: {
            UploaderImages
        }
    })
    export default class ImageUploadManage extends Vue {
        form = {
            imgUrl: '',
            imgUrlId: ''
        }
        bannerImg (valData: any) {
            this.form.imgUrl = valData.path;
            this.form.imgUrlId = valData.id;
        }
    }
</script>

<style lang="scss" scoped>
    .img_upload_box {
        width: 200px;
        height: 200px;
        border: 1px solid $__color-border;
        img {
            max-width: 190px;
            max-height: 190px;
        }
    }
    .img_upload_boxs {
        width: 200px;
    }
    .img_upload_url {
        margin-top: 12px;
        font-size: $__font-size-default;
    }
</style>